<style scoped>
.offline_pay{background-color: var(--color-bg);max-height: 75vh;overflow-y: scroll;}
.pay_img{width: 100%;}
.button{padding: 12px;}
</style>
<template>
  <van-popup v-model:show="is_show" round closeable :close-on-click-overlay="false" @click-close-icon="close" >
    <div class="offline_pay">
      <van-cell-group inset title="收款码">
        <van-cell>
          <template #value>
            <ImgReferrer class="pay_img" :src="pay_img"/>
          </template>
        </van-cell>
        <van-cell title="支付金额" :value="pay_money"/>
      </van-cell-group>

      <van-cell-group inset title="支付凭证">
        <file_img v-model="pay_verify_file" label="凭证上传" required  :error-message="errors.pay_verify_file"></file_img>
        <text_one v-model="note_user" label="备注" required :error-message="errors.note_user"></text_one>
      </van-cell-group>

      <div class="button">
        <van-button block round type="primary" text="提交" @click="submit()" />
      </div>
    </div>
  </van-popup>
</template>

<script>

import file_img from "@/components/form_field/file_img.vue";
import text_one from "@/components/form_field/text_one.vue";
import form_param from "@/components/form_param.vue";
import {ajax} from "@/js/api_tool.js";
import {reactive} from "vue";
import {s94_event} from "@/js/s94_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

const _this = reactive({
  is_show: false,
  callback(){},
  fail(){},

  id: 0,
  pay_img: '',
  pay_money: '',

  pay_verify_file: '',
  note_user: '',


  form_config: {
    pay_img: {label:'', value:'//taiyushangdao-saas.oss-cn-chengdu.aliyuncs.com/uploads/2023/0526/122417699222.png', type:'file_img', is_info:true},
    pay_money: {label:'支付金额', value:'', type:'text_one', is_info:true},
    pay_verify_file: {label:'凭证上传', name:'pay_verify_file', type:'file_img', value:''},
    note_user: {label:'备注', name:'note_user', type:'text_one', value:''},
  },

  errors: {},
})

/**
 * @param id
 * @param pay_img
 * @param pay_money
 * @param [pay_verify_file]
 * @param [note_user]
 * @returns {Promise<{data:object, message:string}>}
 */
export function offline_pay(id, pay_img, pay_money, pay_verify_file, note_user){
  _this.id = id;
  _this.pay_img = pay_img;
  _this.pay_money = pay_money;
  _this.pay_verify_file = pay_verify_file || '';
  _this.note_user = note_user || '';

  _this.is_show = true;
  return new Promise((resolve, reject)=>{
    _this.callback = resolve;
    _this.fail = reject;
  })
}
offline_pay._this = _this;
offline_pay.hide = function(){
  _this.is_show = false;
}

s94_event('router.after', ()=>{
  _this.is_show = false;
})

export default {
  components: {ImgReferrer, file_img, text_one, form_param},
  data(){
    return _this
  },
  methods: {
    submit(){
      this.errors = {};
      if (!this.pay_verify_file) this.errors.pay_verify_file = '支付凭证不能为空';
      if (!this.note_user) this.errors.note_user = '备注不能为空';
      if (Object.keys(this.errors).length) return;
      let data = {
        id: this.id,
        pay_verify_file: this.pay_verify_file,
        note_user: this.note_user
      }
      ajax({url:'/home/offline_pay/pay', method:'POST', data, loading:true}, (res)=>{
        this.callback(res);
        this.is_show = false;
      })
    },
    close(){
      this.fail();
      this.is_show = false;
    },
  },
  mounted() {
  }
}
</script>